<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.augmentum.login.Constants"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.*"%>
<%@ page import="com.augmentum.login.model.Question"%>
<%@ page import="com.augmentum.login.util.Prop"%>
<%
    String basePath = request.getContextPath();
    Question question = (Question) request.getAttribute(Constants.QUESTION);
    Object obj = request.getAttribute(Constants.QUESTION_PARAM_MSG);
    String desc = "";
    String ae = "";
    String ce = "";
    String be = "";
    String de = "";
    if (obj instanceof Map) {
        Map<String, String> paramMap = (Map<String, String>)obj;
        desc = paramMap.get(Constants.DESCRIPTION_EXCEPTION);
        ae = paramMap.get(Constants.OPTION_A_EXCEPTION);
        be = paramMap.get(Constants.OPTION_B_EXCEPTION);
        ce = paramMap.get(Constants.OPTION_C_EXCEPTION);
        de = paramMap.get(Constants.OPTION_D_EXCEPTION);
    }
%>
<script type="text/javascript">
  $(document).ready(function(){
      $("textarea[name='description']").bind({
          blur:function() {
              $(this).css("background-color","#FFFFFF")
              if (!reg['noneempty02'].test($(this).val())) {
                 $(this).parent().next().text("Data length is error!");
                 //$(this).focus();
             } else {
                 $(this).parent().next().text("It's ok!");
             }
          }
      });

       $("input[id='option']").bind({
         blur:function(){
             $(this).css("background-color","#FFFFFF")
             if (!reg['noneempty01'].test($(this).val())) {
                 var obj = $(this).parent().next();
                 obj.text("data length is error!");
                 obj.css('color','#FF3333');
             } else {
                 obj.css('color','#AAFFEE');
                 obj.html("It's ok!");
             }
         }
     });

      $("#submitId").click(function() {
          var desc = $("textarea[name='description']").val();
          var a = $("input[name='optionA']").val();
          var b = $("input[name='optionB']").val();
          var c = $("input[name='optionC']").val();
          var d = $("input[name='optionD']").val();

          var answer = getEditAnswer($("input:radio"), a, b, c, d);
          if (desc && a && b && c && d && answer) {
              $("#editForm").submit();
           } else {
               alert("Some fields cannot be empty!");
           }
      });
  });
  </script>
<div class="edit common common-width border-style">
<div class="common float-left common-height" style="width:25%"></div>
<div class="common float-left common-height" style="width:50%">
  <form id="editForm" action="<%=basePath%>/page/question/edit" method="post">
    <table style="height:400px" class="font-style03 color-style04 common common-width">
      <tr>
        <td>Question ID<input type="hidden" value="<%= question.getQuestionId()%>" name="questionId" /></td>
        <td colspan="2"><%= question.getQuestionId()%></td>
      </tr>
      <tr>
        <td>Question</td>
        <td><textarea placeholder="1-400 characters" class="set-size color-style01 radius3 common-length" style="width: 95%" name="description"><%=question.getDescription()%></textarea></td>
        <td width="150px" style="color:red;font-size:8pt" id="validate0"><%= desc == null ? "" : desc%></td>
      </tr>
      <tr>
        <td>Question answer</td>
        <td colspan="2">
          <table class="color-style01 radius3 common-length">
            <tr>
              <td><input id="A" type="radio" name="answer" value="<%=question.getOptionA()%>" /><label>A</label><input
                placeholder="1-200 characters" class="input-width" id="option" value="<%=question.getOptionA()%>" name="optionA" type="text" /></td>
              <td width="180px" style="color:red;font-size:8pt" id="validate1"><%= ae == null ? "" : ae%></td>
            </tr>
            <tr>
              <td><input id="B" type="radio" name="answer" value="<%=question.getOptionB()%>" /><label>B</label><input
                placeholder="1-200 characters" class="input-width" id="option" value="<%=question.getOptionB()%>" name="optionB" type="text" /></td>
              <td style="color:red;font-size:8pt" id="validate2"><%= be == null ? "" : be%></td>
            </tr>
            <tr>
              <td><input id="C" type="radio" name="answer" value="<%=question.getOptionC()%>" /><label>C</label><input
                placeholder="1-200 characters" class="input-width" id="option" value="<%=question.getOptionC()%>" name="optionC" type="text" /></td>
              <td style="color:red;font-size:8pt" id="validate3"><%= ce == null ? "" : ce%></td>
            </tr>
            <tr>
              <td><input id="D" type="radio" name="answer" value="<%=question.getOptionD()%>" /><label>D</label><input
                placeholder="1-200 characters" class="input-width" id="option" value="<%=question.getOptionD()%>" name="optionD" type="text" /></td>
              <td style="color:red;font-size:8pt" id="validate4"><%= de == null ? "" : de%></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan="3" height=40px;>
          <table class="common-length">
            <tr>
              <td width="15%"></td>
              <td width="15%"></td>
              <td width="20%"><input id="submitId" type="button" value="Save"
                class="color-style03 layout-center cursor common-length bg-color02" /></td>
              <td width="20%"><input type="button" value="Delete" onclick="getClick('<%=basePath%>/page/question/search')"
                class="color-style03 layout-center cursor common-length bg-color02" /></td>
              <td width="15%"></td>
              <td width="15%"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </form>
</div>
<% request.removeAttribute(Constants.QUESTION_PARAM_MSG);%>
<div  class="common float-left common-height" style="width:25%;"></div>
</div>
<script type="text/javascript">
    var strArray = document.getElementsByName("answer");
    for (var i =0; i < strArray.length; i++) {
        if (strArray[i].value == '<%=question.getAnswer()%>') {
            strArray[i].checked = true;
        }
    }
    $("div.edit").height($("body").height()-$("#topId").height());
</script>